<template>
  <view class="container">
    <up-navbar
        :autoBack="true"
        :placeholder="true"
        bgColor="#fff"
        title="详情"
    >
      <template #right>
        <view class="right-box" v-if='dataObj && dataObj.user_id == userInfo.ID' @click="delData">
          删除
        </view>
      </template>
    </up-navbar>

    <view class="page-bor"></view>

    <view class="page-list" v-if="dataObj">
      <view class="l_f_r_sb_c">
        <view class="list-top">
          <image :src="dataObj.user.head || headUrl" mode="aspectFill"></image>
          <view class="">
            <view class="top-name">
              {{ dataObj.user.nickname }}
            </view>
            <view class="top-time">
              <uni-dateformat :date="dataObj.CreatedAt" :format="'yyyy-MM-dd hh:mm'" :threshold="[60000,60*1000*60]"></uni-dateformat>
            </view>
          </view>
        </view>
        <view class="state text_4_24 text_w" v-if="dataObj.state==2">审核失败</view>
        <view class="state state1 text_4_24 text_w" v-if="dataObj.state==0">审核中</view>
      </view>
      <view class="reason text_c_r text_4_24" v-if="dataObj.state==2">
        拒绝理由：{{dataObj.reason}}
      </view>
      <view class="list-content">
        {{ dataObj.brief }}
      </view>

      <view class="list-img" v-if="dataObj.imgurl&&dataObj.imgurl.length >0">
        <image :src="ite" mode="aspectFill" v-for="(ite,index) in dataObj.imgurl" @click="seeImg(index)"></image>
      </view>
			<view class="list-img" v-if="dataObj.videoList.length >0">
			  <video :muted='true' :src="ite" v-for="(ite,index) in dataObj.videoList" :key="index" @play="toVideo(ite)"></video>
			</view>

      <comment s :id="dataID" v-if="dataObj.state==1" :dzNum='dataObj.thumbs_up' @heart='heart' :isHeart='isHeart'></comment>
    </view>

  </view>
</template>

<script setup>
import comment from "@/components/comment/index.vue"
import {getCurrentInstance, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";

const {proxy} = getCurrentInstance();
const textValue = ref('')
const dataID = ref('')
const dataObj = ref({
  user: ''
})
const userId = ref('')
const headUrl = ref('')
const userInfo = ref('')
const isHeart = ref(false)
onLoad((e) => {
  dataID.value = e.id
  headUrl.value = proxy.$store.state.defaultAvatar
  getData(e.id, e.code)
  userInfo.value = uni.getStorageSync('userInfo')

})

function getData(id, code) {
  proxy.$request({
    url: `api/getArticleDetails/?id=${id}&code=${code}`,
    method: 'get',
    success(res) {
      res.data.imgurl = res.data.img ? res.data.img.split(',') : [];
			res.data.videoList = res.data.video ? res.data.video.split(',') : [];
      dataObj.value = res.data
      userId.value = dataObj.value.user.ID
			isHeart.value = dataObj.value.is_like == 1 ? true : false
    }
  })
}

function delData() {
	proxy.$request({
	  url: `api/deleteArticle/`,
	  method: 'post',
		data:{
			id:dataObj.value.ID
		},
	  success(res) {
			if(res.errno == 0) {
				uni.showToast({
					icon: "none",
					title: '删除成功!'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},2000)
			}
	  }
	})
}

function heart() {
	proxy.$request({
	  url: `api/like/`,
	  method: 'post',
		data:{
			id:dataObj.value.ID,
			code:0
		},
	  success(res) {
			if(res.errno == 0) {
				if(isHeart.value) {
					dataObj.value.thumbs_up --
				}else{
					dataObj.value.thumbs_up ++
				}
				isHeart.value = !isHeart.value

			}
	  }
	})
}


function seeImg(index) {
	uni.previewImage({
		urls:dataObj.value.imgurl,
    current: index,
		longPressActions: {
			success: function(data) {
				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			},
			fail: function(err) {
				console.log(err.errMsg);
			}
		}
	});
}

function toVideo(url) {
	uni.navigateTo({
		url:`/pages/community/video?url=${url}`
	})
}


</script>

<style lang="scss" scoped>
.right-box {
  font-weight: 400;
  font-size: 28rpx;
  color: #F63B29;
}

.page-bor {
  height: 10rpx;
  background-color: #F8F8F8;
}

.page-list {
  padding: 28rpx 30rpx;
  background-color: #fff;

  .list-top {
    display: flex;
    align-items: center;

    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }

    .top-name {
      font-size: 28rpx;
      color: #2D2D2D;
    }

    .top-time {
      font-weight: 400;
      font-size: 24rpx;
      color: #8F8F8F;
      margin-top: 10rpx;
    }
  }

  .list-content {
    font-weight: 400;
    font-size: 28rpx;
    color: #000;
    margin-top: 20rpx;
    margin-bottom: 24rpx;
  }

  .list-img {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;

    image {
      width: 220rpx;
      height: 220rpx;
    }
		video {
			width: 220rpx;
			height: 220rpx;
		}
  }

}
.state{
  background: rgb(255, 121, 121);
  padding: 2rpx 10rpx;
  border-radius: 5rpx;
  &.state1{
    background-color: grey;
  }
}
.reason{
  margin-top: 20rpx;
}
</style>
